import Link from '@docusaurus/Link';

# 快速开始

Tango 是一个用于快速构建低代码平台的低代码设计器框架，借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。

## 环境要求

- 安装 node 16.0.0 以上版本: https://nodejs.org/en/download/
- 安装 npm 8.x 或 yarn 1.x: https://classic.yarnpkg.com/en/docs/getting-started

## 启动 Tango Playground

1.  克隆仓库至本地
    ```sh
    git clone https://github.com/NetEase/tango.git
    ```
2.  在 hosts 文件下添加本地开发的域名
    ```hosts
    127.0.0.1 local.netease.com
    ```
3.  安装依赖并启动 Tango Playground
    ```sh
    yarn install
    yarn start
    ```
4.  打开浏览器访问 https://local.netease.com:6006 并允许不安全的证书

## 启动本地沙箱

本地开发除了需要启动 Tango 的 playground 外，还需要一个可用的沙箱环境来承载设计器。

:::tip
沙箱部分来源于 codesandbox，不属于 tango 的核心代码库，我们在原有的 codesandbox 基础上进行了一系列的改造
:::

如果没有可用的在线沙箱，可以通过本地启动一个沙箱来完成开发；如果已有一个在线沙箱，且沙箱与本地的 playground 共用一级域名，请直接跳至第 7 步修改 `bundlerURL` 为在线沙箱的地址。

1.  克隆仓库至本地
    ```sh
    git clone https://github.com/NetEase/codesandbox-client.git
    ```
2.  修改 `Caddyfile`，将 `:8080` 修改为 playground 的域名，例如 `local.netease.com`
3.  将上述域名添加至 hosts 文件
    ```hosts
    127.0.0.1 local.netease.com
    ```
4.  安装依赖并构建沙箱产物
    ```sh
    yarn install
    yarn build:deps
    yarn build:sandpack
    ```
    你也可以从 [这里](https://github.com/NetEase/codesandbox-client/releases) 下载预构建的沙箱产物，创建 `www` 子文件夹并将压缩包解压到该文件夹内
5.  使用 Caddy 托管构建沙箱后的静态文件，若本地没有 Caddy 可前往 https://caddyserver.com/download 下载
    ```sh
    caddy run
    ```
6.  打开浏览器访问 https://local.netease.com:8443 并允许不安全的证书
7.  修改 `apps/playground/src/pages/index.tsx`，找到 `<Sandbox />` 组件，将 `bundlerURL` 修改为 `https://local.netease.com:8443`
    ```jsx
    <Sandbox bundlerURL="https://local.netease.com:8443" />
    ```
8.  回到 playground 页面并刷新，现在 playground 将使用你指定的沙箱来运行设计器

若你本地有 Docker 也可将上述的第 4-5 步改为使用 Docker 构建镜像并启动：

```sh
docker build -t tango-codesandbox .
docker run -p 8443:8443 tango-codesandbox
```
